<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               :page.sync="page"
               v-model="form"
               ref="crud"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad">
      <template slot="taskStatus" slot-scope="scope">
        <el-tag v-if="scope.row.taskStatus==0">等待开始</el-tag>
        <el-tag v-if="scope.row.taskStatus==1">正在运行</el-tag>
        <el-tag type="success" v-if="scope.row.taskStatus==2">任务完成</el-tag>
        <el-tag type="danger" v-if="scope.row.taskStatus==3">任务出错</el-tag>
        <el-tag v-if="scope.row.taskStatus==4">创建数据索引</el-tag>
        <el-tag v-if="scope.row.taskStatus==5">正在聚合</el-tag>
        <el-tag v-if="scope.row.taskStatus==6">攻击分析</el-tag>
      </template>

      <template slot-scope="{type,size,row}" slot="menu">
        <el-button icon="el-icon-view" :size="size" :type="type" @click="lookDetails(row.id)">查看详情</el-button>
      </template>
    </avue-crud>

    <el-dialog
      title="详情"
      :visible.sync="detailDialogVisible"
      append-to-body="true"
      width="30%">
      <el-form ref="form" :model="selectedRecord" label-position="left" disabled="true" label-width="120px" size="small">
        <el-form-item label="导入时间">
          {{selectedRecord.date}}
        </el-form-item>
        <el-form-item label="导入状态">
          <el-tag v-if="selectedRecord.taskStatus==0">等待开始</el-tag>
          <el-tag v-if="selectedRecord.taskStatus==1">正在运行</el-tag>

          <el-tag type="success" v-if="selectedRecord.taskStatus==2">任务完成</el-tag>
          <span style="margin-left: 10px" v-if="selectedRecord.taskStatus==2">用时约: {{usedTime}}</span>

          <el-tag type="danger" v-if="selectedRecord.taskStatus==3">任务出错</el-tag>
          <el-tag v-if="selectedRecord.taskStatus==4">创建数据索引</el-tag>
          <el-tag v-if="selectedRecord.taskStatus==5">正在聚合</el-tag>
          <el-tag v-if="selectedRecord.taskStatus==6">攻击分析</el-tag>
        </el-form-item>
        <el-form-item label="错误信息" v-if="selectedRecord.taskStatus==3">
          {{selectedRecord.threadTaskProgress.message}}
        </el-form-item>
        <div  v-if="selectedRecord.taskStatus!=3">
          <el-form-item label="就绪时间">
            {{selectedRecord.taskStartTime}}
          </el-form-item>
          <el-form-item label="数据文件信息(S)">
            文件大小: {{formatFileSize(selectedRecord.importSFileSize)}}
            ---
            文件行数: {{formatLongNumber(selectedRecord.importSLineNum)}}
          </el-form-item>
          <el-form-item label="数据文件信息(D)" >
            文件大小: {{formatFileSize(selectedRecord.importDFileSize)}}
            ---
            文件行数: {{formatLongNumber(selectedRecord.importDLineNum)}}
          </el-form-item>
          <el-form-item label="任务开始时间">
            {{selectedRecord.threadTaskProgress.startTime}}
          </el-form-item>
          <el-form-item label="任务结束时间">
            {{selectedRecord.threadTaskProgress.endTime}}
          </el-form-item>
        </div>

      </el-form>
    </el-dialog>


  </basic-container>
</template>

<script>
  import {getList, getDetail} from "@/youan/api/audit/importRecord";

  export default {
    data() {
      return {
        form: {},
        query: {},
        loading: true,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        selectionList: [],
        option: {
          height:'auto',
          calcHeight: 30,
          tip: false,
          addBtn: false,
          editBtn: false,
          delBtn: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          viewBtn: false,
          dialogClickModal: false,
          column: [
            {
              label: "导入时间",
              prop: "date",
            },
            {
              label: "导入状态",
              prop: "taskStatus",
              type:'select',
              slot: true,
              dicData:[
                {
                  label:'就绪',
                  value:0
                },{
                  label:'导入数据',
                  value:1
                },{
                  label:'任务完成',
                  value:2
                },{
                  label:'任务异常',
                  value:3
                },{
                  label:'创建索引',
                  value:4
                },{
                  label:'执行聚合',
                  value:5
                },{
                  label:'行为分析',
                  value:6
                }
              ]
            },
            {
              label: "任务就绪时间",
              prop: "taskStartTime"
            },
            {
              label: "文件大小(s)",
              prop: "importSFileSize",
            },
            {
              label: "数据行(s)",
              prop: "importSLineNum",
            },
            {
              label: "文件大小(d)",
              prop: "importDFileSize",
            },
            {
              label: "数据行(d)",
              prop: "importDLineNum",
            },

          ]
        },
        data: [],
        detailDialogVisible: false,
        selectedRecord: {threadTaskProgress: {}},
      };
    },
    computed: {
      usedTime() {
        let startTime = this.selectedRecord.threadTaskProgress.startTime;
        startTime = new Date(startTime);

        let endTime = this.selectedRecord.threadTaskProgress.endTime;
        endTime = new Date(endTime);

        const minutes = parseInt((endTime - startTime) / 1000 / 60);

        if(minutes > 60) {
          const hours = parseInt(minutes / 60);
          return `${hours}小时${minutes % 60}分钟`
        }else {
          return `${minutes}分钟`
        }
      }
    },
    methods: {
      lookDetails(taskId) {
        getDetail(taskId).then(resp => {
          this.detailDialogVisible = true;
          this.selectedRecord = resp.data.data;
          console.log(resp.data.data);
        })
      },







      searchReset() {
        this.query = {};
        this.onLoad(this.page);
      },
      searchChange(params, done) {
        this.query = params;
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
        done();
      },
      selectionChange(list) {
        this.selectionList = list;
      },
      currentChange(currentPage){
        this.page.currentPage = currentPage;
      },
      sizeChange(pageSize){
        this.page.pageSize = pageSize;
      },
      refreshChange() {
        this.onLoad(this.page, this.query);
      },
      onLoad(page, params = {}) {
        this.loading = true;
        getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          const data = res.data.data;

          this.buildImportRecordList(data.records);
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
        });
      },
      buildImportRecordList(list) {
        for(let item of list) {
          item.importSFileSize = this.formatFileSize(item.importSFileSize);
          item.importDFileSize = this.formatFileSize(item.importDFileSize);
          item.importSLineNum =  this.formatLongNumber(item.importSLineNum);
          item.importDLineNum =  this.formatLongNumber(item.importDLineNum);

          if(item.taskStatus == 0 || item.taskStatus == 3) {
            item.importSFileSize = "";
            item.importDFileSize = "";
            item.importSLineNum = "";
            item.importDLineNum = "";
          }

        }
      },
      formatFileSize(num) {
        if(!num) {
          return "";
        }
        return Math.trunc(num / 1024 / 1024) + " MB";
      },
      formatLongNumber(num) {
        if(!num) {
          return "";
        }
        return  num.toString().replace(/(\d)(?=(\d{3})+$)/g, "$1,");
      }
    },
    activated() {
      this.$nextTick(() => {
        if (this.$refs.crud.$refs.table) {
          this.$refs.crud.$refs.table.doLayout();
        }
      })
    },
  };
</script>

<style>
</style>
